<template>
  <q-page padding>
    <q-card flat>
      <q-card-section class="row q-gutter-x-md items-center">
        <q-input outlined dense style="width: 20%" v-model="queryParams.jobGroup"
                 :label="$t('Job') + $t('Group')"/>
        <q-input outlined dense style="width: 20%" v-model="queryParams.jobName"
                 :label="$t('Job') + $t('Name')"/>
        <q-input outlined dense style="width: 20%" v-model="queryParams.jobInnerName"
                 :label="$t('Job') +$t('Inner') + $t('Name')"/>
        <q-btn color="primary" @click="handleSearch" :label="$t('Search')"/>
        <q-btn color="primary" @click="resetSearch" :label="$t('Reset')"/>
      </q-card-section>
      <q-card-section>
        <q-table row-key="id" separator="cell" :rows="tableData" :columns="columns" v-model:pagination="pagination"
                 :rows-per-page-options="pageOptions" :loading="loading" @request="onRequest">
          <template v-slot:top="props">
            <q-btn color="primary" @click="showAddForm()" :label="$t('Add') + ' ' + $t('Job')"
                   v-has="'job:add'"/>
            <q-space/>
            <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                   @click="props.toggleFullscreen" class="q-ml-md"/>
          </template>
          <template v-slot:body-cell-status="props">
            <q-td :props="props">
              <GqaDictShow :dictCode="props.row.status"/>
            </q-td>
          </template>
          <template v-slot:body-cell-stable="props">
            <q-td :props="props">
              <GqaDictShow :dictCode="props.row.stable"/>
            </q-td>
          </template>
          <template v-slot:body-cell-actions="props">
            <q-td :props="props" class="q-gutter-x-xs">
              <q-btn flat dense rounded icon="eva-edit-2-outline" color="primary"
                     @click="showEditForm(props.row)" v-has="'job:edit'">
                <q-tooltip>
                  {{ $t('Edit') }}
                </q-tooltip>
              </q-btn>
              <q-btn flat dense rounded icon="delete_outline" color="negative"
                     @click="handleDelete(props.row)" v-has="'job:delete'">
                <q-tooltip>
                  {{ $t('Delete') }}
                </q-tooltip>
              </q-btn>
              <q-btn flat dense rounded icon="smart_display" color="negative"
                     @click="handleTrigger(props.row)" v-has="'job:trigger'">
                <q-tooltip>
                  {{ $t('Trigger') + $t('Job') }}
                </q-tooltip>
              </q-btn>
              <q-btn flat dense rounded icon="not_started" color="negative"
                     @click="handleStart(props.row)" v-has="'job:start'">
                <q-tooltip>
                  {{ $t('Start') + $t('Job') }}
                </q-tooltip>
              </q-btn>
              <q-btn flat dense rounded icon="stop_circle" color="negative"
                     @click="handleStop(props.row)" v-has="'job:stop'">
                <q-tooltip>
                  {{ $t('Stop') + $t('Job') }}
                </q-tooltip>
              </q-btn>
              <q-btn flat dense rounded icon="list_alt" color="negative"
                     @click="handleLog(props.row)" v-has="'job:log'">
                <q-tooltip>
                  {{ $t('Job') + $t('Log') }}
                </q-tooltip>
              </q-btn>
            </q-td>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
    <recordDetail ref="recordDetailDialog" @handleFinish="handleFinish"/>
    <q-dialog v-model="showLogFlag" persistent full-width>
      <q-card>
      <q-card-section>
        <jobLog :jobInnerName = "currentJobInnerName" :jobGroup = "currentJobGroup"></jobLog>
      </q-card-section>
        <q-card-actions align="right">
          <q-btn flat dense rounded icon="close" color="negative" @click="closeLog">{{$t('Close')}}</q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script setup>
import useTableData from 'src/composables/useTableData'
import {computed, onMounted,ref} from 'vue'
import recordDetail from './modules/recordDetail.vue'
import {postAction} from "src/api/manage";
import {useQuasar} from "quasar";
import jobLog from './modules/jobLog.vue'
const $q = useQuasar()
const showLogFlag = ref(false)
const url = {
  list: 'job/get-job-list',
  delete: 'job/delete-job-by-id',
  triggerJob: 'job/trigger-job',
  stopJob: 'job/stop-job',
  startJob: 'job/start-job'
}
const currentJobInnerName = ref(null)
const currentJobGroup = ref(null)
const columns = computed(() => {
  return [
    {name: 'sort', align: 'center', label: t('Sort'), field: 'sort'},
    {name: 'jobGroup', align: 'center', label: t('Job') + t('Group'), field: 'jobGroup'},
    {name: 'jobName', align: 'center', label: t('Job') + t('Name'), field: 'jobName'},
    {name: 'jobInnerName', align: 'center', label: t('Job') + t('Inner') + t('Name'), field: 'jobInnerName'},
    {name: 'status', align: 'center', label: t('Status'), field: 'status'},
    {name: 'stable', align: 'center', label: t('Stable'), field: 'stable'},
    {name: 'actions', align: 'center', label: t('Actions'), field: 'actions',},
  ]
})
const {
  t,
  pagination,
  queryParams,
  pageOptions,
  GqaDictShow,
  loading,
  tableData,
  recordDetailDialog,
  showAddForm,
  showEditForm,
  onRequest,
  getTableData,
  handleSearch,
  resetSearch,
  handleFinish,
  handleDelete,
} = useTableData(url)

onMounted(() => {
  getTableData()
})

const handleTrigger = (row)=>{
  if (!url || !url.triggerJob) {
    $q.notify({
      type: 'negative',
      message: t('UrlNotConfig'),
    })
    return
  }
  $q.dialog({
    title: t('Confirm'),
    message: t('Confirm') + t('Trigger') + '?',
    cancel: true,
    persistent: true,
  }).onOk(async () => {
    const res = await postAction(url.triggerJob, {
      id: row.id,
    })
    if (res.code === 200) {
      $q.notify({
        type: 'positive',
        message: res.msg,
      })
    }
    getTableData()
  })
}
const handleStart = (row)=>{
  if (!url || !url.startJob) {
    $q.notify({
      type: 'negative',
      message: t('UrlNotConfig'),
    })
    return
  }
  $q.dialog({
    title: t('Confirm'),
    message: t('Confirm') + t('Start') + '?',
    cancel: true,
    persistent: true,
  }).onOk(async () => {
    const res = await postAction(url.startJob, {
      id: row.id,
    })
    if (res.code === 200) {
      $q.notify({
        type: 'positive',
        message: res.msg,
      })
    }
    getTableData()
  })
}
const handleStop = (row)=>{
  if (!url || !url.stopJob) {
    $q.notify({
      type: 'negative',
      message: t('UrlNotConfig'),
    })
    return
  }
  $q.dialog({
    title: t('Confirm'),
    message: t('Confirm') + t('Stop') + '?',
    cancel: true,
    persistent: true,
  }).onOk(async () => {
    const res = await postAction(url.stopJob, {
      id: row.id,
    })
    if (res.code === 200) {
      $q.notify({
        type: 'positive',
        message: res.msg,
      })
    }
    getTableData()
  })
}

const handleLog = (row)=>{
  currentJobInnerName.value = row.jobInnerName
  currentJobGroup.value = row.jobGroup
  showLogFlag.value = true
}
const closeLog = (row)=>{
  showLogFlag.value = false
}
</script>
